<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="500px"
  >
    <el-form label-width="120px">
      <!-- 点要素属性字段 -->
      <template v-if="currentTypeName === 'city'">
        <el-form-item label="名称(name)">
          <el-input v-model="featureProperties.name" />
        </el-form-item>
        <el-form-item label="拼音(pinyin)">
          <el-input v-model="featureProperties.pinyin" />
        </el-form-item>
        <el-form-item label="国家标准码(gbcode)">
          <el-input-number v-model="featureProperties.gbcode" :min="0" />
        </el-form-item>
        <el-form-item label="93版代码(adcode93)">
          <el-input-number v-model="featureProperties.adcode93" :min="0" />
        </el-form-item>
        <el-form-item label="99版代码(adcode99)">
          <el-input-number v-model="featureProperties.adcode99" :min="0" />
        </el-form-item>
        <el-form-item label="行政区类别(adclass)">
          <el-input-number v-model="featureProperties.adclass" :min="0" />
        </el-form-item>
        <el-form-item label="缩放比例(scale)">
          <el-input-number v-model="featureProperties.scale" :min="0" :step="0.1" />
        </el-form-item>
      </template>
      
      <!-- 线要素属性字段 -->
      <template v-else-if="currentTypeName === 'bou2_4l'">
        <el-form-item label="起始节点(fnode_)">
          <el-input-number v-model="featureProperties.fnode_" :min="0" />
        </el-form-item>
        <el-form-item label="终止节点(tnode_)">
          <el-input-number v-model="featureProperties.tnode_" :min="0" />
        </el-form-item>
        <el-form-item label="左多边形(lpoly_)">
          <el-input-number v-model="featureProperties.lpoly_" :min="0" />
        </el-form-item>
        <el-form-item label="右多边形(rpoly_)">
          <el-input-number v-model="featureProperties.rpoly_" :min="0" />
        </el-form-item>
        <el-form-item label="长度(length)">
          <el-input-number v-model="featureProperties.length" :min="0" :step="0.001" />
        </el-form-item>
        <el-form-item label="bou2_4m_">
          <el-input-number v-model="featureProperties.bou2_4m_" :min="0" />
        </el-form-item>
        <el-form-item label="bou2_4m_id">
          <el-input-number v-model="featureProperties.bou2_4m_id" :min="0" />
        </el-form-item>
        <el-form-item label="国家标准码(gbcode)">
          <el-input-number v-model="featureProperties.gbcode" :min="0" />
        </el-form-item>
      </template>
      
      <!-- 面要素属性字段 -->
      <template v-else-if="currentTypeName === 'bou2_4p'">
        <el-form-item label="面积(area)">
          <el-input-number v-model="featureProperties.area" :min="0" :step="0.001" />
        </el-form-item>
        <el-form-item label="周长(perimeter)">
          <el-input-number v-model="featureProperties.perimeter" :min="0" :step="0.001" />
        </el-form-item>
        <el-form-item label="bou2_4m_">
          <el-input-number v-model="featureProperties.bou2_4m_" :min="0" />
        </el-form-item>
        <el-form-item label="bou2_4m_id">
          <el-input-number v-model="featureProperties.bou2_4m_id" :min="0" />
        </el-form-item>
        <el-form-item label="93版代码(adcode93)">
          <el-input-number v-model="featureProperties.adcode93" :min="0" />
        </el-form-item>
        <el-form-item label="99版代码(adcode99)">
          <el-input-number v-model="featureProperties.adcode99" :min="0" />
        </el-form-item>
        <el-form-item label="名称(name)">
          <el-input v-model="featureProperties.name" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';

// 定义组件的属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  currentTypeName: {
    type: String,
    required: true
  },
  featureProperties: {
    type: Object,
    default: () => ({})
  }
});

// 定义组件的事件
const emit = defineEmits(['update:visible', 'submit', 'cancel']);

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

const dialogTitle = computed(() => {
  switch (props.currentTypeName) {
    case 'city':
      return '编辑点要素属性';
    case 'bou2_4l':
      return '编辑线要素属性';
    case 'bou2_4p':
      return '编辑面要素属性';
    default:
      return '编辑要素属性';
  }
});

// 方法
const handleCancel = () => {
  emit('cancel');
  emit('update:visible', false);
};

const handleSubmit = () => {
  emit('submit', props.featureProperties);
  emit('update:visible', false);
};
</script>

<style scoped>
/* 可以添加特定于此对话框的样式 */
</style>